<template>
	<el-card>
		<div class="profession_bread_hearder">
			<div class="class-profiles">
				<div class="title">{{heardTitle}}</div>
			</div>
			<el-button class="float-right" @click="back">{{$t('common.btn.back')}}</el-button>
		</div>
		<div style="margin-top: 24px;">
            <el-form
                :model="postForm"
                label-position="right"
                label-width="140px"
                :rules="rules"
                ref="postForm"
                label-suffix="："
            >
                <el-row>
                    <el-col :span="8">
                        <el-form-item :label="$t('professions.professionalDegreeCateGory')" prop="majorId">
                            <el-select v-model="postForm.majorId" style="width: 100%;">
                                <el-option
                                    v-for="item in options.majorId"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('professions.professionalDomainName')" prop="name">
                            <el-input v-model="postForm.name" maxlength="50"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item :label="$t('nonPublicCourseOpen.majorCode')" prop="code">
                            <el-input v-model="postForm.code" maxlength="32"></el-input>
                        </el-form-item>
                    </el-col>
                      </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item :label="$t('professions.authorizedYear')">
                            <el-date-picker
                                ref="datepicker"
                                v-model="postForm.time"
                                type="year"
                                value-format="yyyy"
                                style="width:100%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item :label="$t('message.nameEn')">
                            <el-input v-model="postForm.nameEn" maxlength="50"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('arrangement.assistDataCfg.iseffective')">
                            <el-select v-model="postForm.status" style="width: 100%;" :disabled="this.postForm.isRevoke == 1">
                                <el-option
                                    v-for="item in options.status"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item :label="$t('professions.revoke')">
                            <el-select v-model="postForm.isRevoke" style="width: 100%;" @change="revokeChange">
                                <el-option
                                    v-for="item in options.isRevoke"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('professions.revokeTime')">
                            <el-date-picker
                                :disabled="revokeTimeReadOnly"
                                v-model="postForm.revokeTime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="month"
                                style="width:100%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item :label="$t('professions.isDoctors')">
                            <el-select v-model="postForm.isDoctor" style="width: 100%;">
                                <el-option
                                    v-for="item in options.isDoctor"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!--<el-col :span="8">
                        <el-form-item :label="$t('professions.isRecruit')">
                            <el-select v-model="postForm.isRecruit" style="width: 100%;">
                                <el-option
                                    v-for="item in options.isRecruit"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>-->
                </el-row>
             </el-form>
               <div style="margin-top: 16px;margin-bottom: 16px;font-size: 16px; font-size: 20px; color: #000; font-weight: bold;">{{$t('professions.enroTrainingInfo')}}</div>
            <div class="edu-opertion-bar" style="margin-bottom: 16px;">
                <div class="float-right">
                    <el-button type="primary" @click="openCollegeDialog">{{$t("message.add")}}</el-button>
                </div>
            </div>
                <el-table stripe :data="collegeRelation" size="mini" width="100%" tooltip-effect="light">
                    <edu-table-column   :label="$t('label.trainingLevel')" prop="trainingLevelI18n" />
                    <edu-table-column :label="$t('label.trainingCategory')" prop="trainingCategoryI18n" />
                    <edu-table-column prop="studentCategoryI18n" :label="$t('dic.degreeType')" ></edu-table-column>
                    <edu-table-column :label="$t('professions.college')" prop="collegesI18n" />
                    <edu-table-column :label="$t('message.operating')" width="100">
                       <template slot-scope="scope">
                            <el-button type="text"   size="mini"  @click="editCollege(scope.row)" >{{$t("message.edit")}}</el-button>
                            <el-button  type="text"   size="mini"    @click="deleteCollege(scope.row)"   >{{$t("message.delete")}}</el-button>
                        </template>
                    </edu-table-column>
                    </el-table>
            <div class="profess_footer_border">
               <div class="float-right" style="margin-top: 16px;">
                    <el-button @click="back">{{$t("message.cancel")}}</el-button>
                    <el-button type="primary" @click="save">{{$t("message.save")}}</el-button>
               </div>
            </div>

          <el-dialog
            :title="$t('professions.stuCateMainter')"
            width="800px"
            :visible.sync="showCollegeDialog"
            :close-on-click-modal="false"
            @close="resetCollegeFormValidate()"
            v-drag-dialog
        >
            <el-form
                :model="postCollegeForm"
                label-position="right"
                label-width="100px"
                ref="postCollegeForm"
                :rules="collegeRules"
                label-suffix="："
            >
                <el-row gutter="20">
                    <el-col :span="12">
                        <el-form-item :label="$t('label.trainingLevel')" prop="trainingLevel">
                            <el-select v-model="postCollegeForm.trainingLevel" style="width: 100%;">
                                <el-option
                                    v-for="item in options.trainingLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('label.trainingCategory')" prop="trainingCategory">
                            <el-select
                                v-model="postCollegeForm.trainingCategory"
                                multiple
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in options.trainingCategory"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row gutter="20">
                    <el-col :span="12">
                        <el-form-item :label="$t('dic.degreeType')">
                            <el-select
                                disabled
                                v-model="postCollegeForm.studentCategory"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in options.studentCategory"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row gutter="20">
                    <el-col :span="24">
                        <el-checkbox-group v-model="chkColleges">
                            <el-table :data="colleges" ref="collegeTable" tooltip-effect="light">
                                <edu-table-column label="$t('professions.collegeInfo')">
                                    <template slot-scope="props">
                                        <el-checkbox
                                            v-if="props.row.c0"
                                            :label="props.row.c0.value"
                                        >{{props.row.c0.label}}</el-checkbox>
                                    </template>
                                </edu-table-column>
                                <edu-table-column>
                                    <template slot-scope="props">
                                        <el-checkbox
                                            v-if="props.row.c1"
                                            :label="props.row.c1.value"
                                        >{{props.row.c1.label}}</el-checkbox>
                                    </template>
                                </edu-table-column>
                                <edu-table-column>
                                    <template slot-scope="props">
                                        <el-checkbox
                                            v-if="props.row.c2"
                                            :label="props.row.c2.value"
                                        >{{props.row.c2.label}}</el-checkbox>
                                    </template>
                                </edu-table-column>
                                <edu-table-column>
                                    <template slot-scope="props">
                                        <el-checkbox
                                            v-if="props.row.c3"
                                            :label="props.row.c3.value"
                                        >{{props.row.c3.label}}</el-checkbox>
                                    </template>
                                </edu-table-column>
                            </el-table>
                        </el-checkbox-group>
                    </el-col>
                </el-row>
                <el-row gutter="20">
                    <el-col :span="24">
                        <div class="float-right">
                            <el-button @click="back">{{$t("message.cancel")}}</el-button>
                            <el-button type="primary" @click="saveCollege">{{$t("message.save")}}</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

	  <el-dialog
            :title="$t('professions.stuCateMainter')"
            width="1000px"
            :visible.sync="showCollegeDialog"
            :close-on-click-modal="false"
            @close="resetCollegeFormValidate()"
            v-drag-dialog
        >
            <el-form
                :model="postCollegeForm"
                label-position="right"
                label-width="100px"
                ref="postCollegeForm"
                :rules="collegeRules"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('label.trainingLevel')" prop="trainingLevel">
                            <el-select v-model="postCollegeForm.trainingLevel" style="width: 80%;">
                                <el-option
                                    v-for="item in options.allTrainingLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('label.trainingCategory')" prop="trainingCategory">
                            <el-select
                                v-model="postCollegeForm.trainingCategory"
                                style="width: 80%;"
                                multiple
                            >
                                <el-option
                                    v-for="item in options.trainingCategory"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('dic.degreeType')">
                            <el-select
                                disabled
                                v-model="postCollegeForm.studentCategory"
                                style="width: 80%;"
                            >
                                <el-option
                                    v-for="item in options.studentCategory"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-checkbox-group v-model="chkColleges">
                            <table class="proManange-component1" cellpadding="0" cellspacing="0">
                                <thead>
                                    <tr>
                                        <td style="background: #F5F7F9" colspan="4" >
                                            <el-checkbox-button
                                               :label="$t('professions.collegeInfo')"
                                               disabled
                                            ></el-checkbox-button>
                                        </td>
                                    </tr>
                                </thead>
                                <tr v-for="item in colleges">
                                    <td>
                                        <el-checkbox
                                            v-if="item.c0"
                                            :label="item.c0.value"
                                        >{{item.c0.label}}</el-checkbox>
                                    </td>
                                    <td>
                                        <el-checkbox
                                            v-if="item.c1"
                                            :label="item.c1.value"
                                        >{{item.c1.label}}</el-checkbox>
                                    </td>
                                    <td>
                                        <el-checkbox
                                            v-if="item.c2"
                                            :label="item.c2.value"
                                        >{{item.c2.label}}</el-checkbox>
                                    </td>
                                     <td>
                                        <el-checkbox
                                            v-if="item.c3"
                                            :label="item.c3.value"
                                        >{{item.c3.label}}</el-checkbox>
                                    </td>
                                </tr>
                            </table>
                            <!-- <el-table :data="colleges" ref="collegeTable" class="proManange-component1">
                                <edu-table-column label="所属院系信息：">
                                    <template slot-scope="props">
                                        <el-checkbox
                                            v-if="props.row.c0"
                                            :label="props.row.c0.value"
                                        >{{props.row.c0.label}}</el-checkbox>
                                    </template>
                                </edu-table-column>
                                <edu-table-column>
                                    <template slot-scope="props">
                                        <el-checkbox
                                            v-if="props.row.c1"
                                            :label="props.row.c1.value"
                                        >{{props.row.c1.label}}</el-checkbox>
                                    </template>
                                </edu-table-column>
                                <edu-table-column>
                                    <template slot-scope="props">
                                        <el-checkbox
                                            v-if="props.row.c2"
                                            :label="props.row.c2.value"
                                        >{{props.row.c2.label}}</el-checkbox>
                                    </template>
                                </edu-table-column>
                                <edu-table-column>
                                    <template slot-scope="props">
                                        <el-checkbox
                                            v-if="props.row.c3"
                                            :label="props.row.c3.value"
                                        >{{props.row.c3.label}}</el-checkbox>
                                    </template>
                                </edu-table-column>
                            </el-table> -->
                        </el-checkbox-group>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 16px;" >
                    <el-col :span="24">
                        <div class="float-right">
                            <el-button @click="cancelCollege">{{$t("message.cancel")}}</el-button>
                            <el-button type="primary" @click="saveCollege">{{$t("message.save")}}</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
		</div>
	</el-card>
</template>
<script>
import {
    getGraduateDegreeById,
     getStudentCollegeList,
      deleteStudentCollegeById,
       getStudentCollegeById,
       addStudentCollege,
        editStudentCollegeById,
          editGraduateDegree,
} from "common/src/api/resource/course";

export default {
	name: "GraduateProfessionMajorComponent",
	props: {
        options:{
            type: Array
        },
        heardTitle: {
             type: String
        }
    },
    watch: {
          postForm: {
            handler(curVal, oldVal) {
                if ("0" == curVal.isRevoke) {
                    this.revokeTimeReadOnly = true;
                    this.postForm.revokeTime = "";
                } else if ("1" == curVal.isRevoke) {
                    this.revokeTimeReadOnly = false;
                }
            },
            deep: true
        }
    },
	data() {
        let checkCode = (rule, value, callback) => {
            var codeReg = /\d{6,}/;
            if (!codeReg.test(value)) {
                callback(new Error(this.$t('professions.numberLimited')));
            } else {
                callback();
            }
        };
		return {
             doctorReadOnly: true, //博士点批准时间可编辑状态
            nationalReadOnly: true, //国家重点学科认定时间可编辑状态
            shanghaiReadOnly: true, //上海市重点学科认定时间可编辑状态
            revokeTimeReadOnly: true, //撤销时间可编辑状态
            editId:"",
             postForm: {
                majorId: "",
                name: "",
                nameEn: "",
                code: "",
                time: "",
                status: "1",
                isDoctor: "0",
                isRevoke: "0",
                isRecruit: "1",
                revokeTime: "",
                type: 2 //必填
            },
             collegeRelation: [],
                 colleges: [], //院系列表
            chkColleges: [], //院系复选框列表
               postCollegeForm: {
                trainingLevel: "",
                trainingCategory: "",
                studentCategory: "1"
            },
             showCollegeDialog: false,
               rules: {
                majorId: [
                    {
                        required: true,
                        message: this.$t('professions.plsInputMajorDegreeName'),
                        trigger: "blur"
                    }
                ],
                code: [
                    {
                        required: true,
                        message: this.$t('professions.plsInputProCode'),
                        trigger: "blur"
                    }
                ],
                name: [
                    {
                        required: true,
                        message:  this.$t('professions.plsInputMajorDomainCode'),
                        trigger: "blur"
                    }
                ]
            },
              collegeRules: {
                trainingLevel: [
                    {
                        required: true,
                        message: this.$t('course.selectTrainingLevel'),
                        trigger: "blur"
                    }
                ],
                trainingCategory: [
                    {
                        required: true,
                        message: this.$t('professions.plsChooseTrainCategory'),
                        trigger: "blur"
                    }
                ]
            },
         }
    },
	created() {},
	computed: {},
	methods: {
            edit(row){
               this.editId = row.id;
               getGraduateDegreeById(row.id).then(res => {
                    if (res.code == 200) {
                        Object.keys(res.data).forEach(k => {
                            if (this.postForm.hasOwnProperty(k)) {
                                this.postForm[k] =
                                    res.data[k] == 0 || res.data[k] == 1
                                        ? res.data[k].toString()
                                        : res.data[k];
                            }
                        });
                        if (res.data.time) {
                            let date = new Date();
                            date.setFullYear(res.data.time);
                            this.postForm.time = date;
                        }

                        return res.data.majorId;
                    }
                    }).then(() => {
                     this.getStudentCollegeList();
                });
            },

        getStudentCollegeList() {
            getStudentCollegeList({ degreeId: this.editId }).then(res => {
                if (res.code == 200) {
                    this.collegeRelation = res.data.list;
                }
            });
        },
         //编辑院系
        editCollege(row) {
            this.editCollegeId = row.id;
            getStudentCollegeById(this.editCollegeId).then(res => {
                if (res.code == 200) {
                    this.showCollegeDialog = true;
                    this.postCollegeForm.trainingLevel = res.data.trainingLevel;
                    if (res.data.trainingCategory) {
                        this.postCollegeForm.trainingCategory = res.data.trainingCategory
                            .substring(0, res.data.trainingCategory.length - 1)
                            .split(",");
                    }

                    this.postCollegeForm.studentCategory = "2";
                    if (res.data.colleges) {
                        this.chkColleges = res.data.colleges
                            .split(",")
                            .filter(c => c);
                    }
                    this.initCollege();
                }
            });
        },

     openCollegeDialog() {
            this.showCollegeDialog = true;
            this.initCollege();
        },

        saveCollege() {
            this.$refs.postCollegeForm.validate(valid => {
                if (!valid) {
                    return;
                }
                if (this.chkColleges.length == 0) {
                    this.$message({
                        type: "warning",
                        message: this.$t('professions.plsChooseCollageInfo')
                    });
                    return;
                }
                let data = _.cloneDeep(this.postCollegeForm);
                if (this.postCollegeForm.trainingCategory.length > 0)
                    data.trainingCategory =
                        this.postCollegeForm.trainingCategory.join(",") + ",";
                data.degreeId = this.editId;
                data.colleges =
                    this.chkColleges.length > 0
                        ? this.chkColleges.join(",") + ","
                        : "";
                let fn = res => {
                    if (res.code == 200) {
                        this.showCollegeDialog = false;
                        this.$message({
                            type: "success",
                            message: this.$t("message.saveSuccess")
                        });
                        this.getStudentCollegeList();
                    }
                };
                if (this.editCollegeId) {
                    data.id = this.editCollegeId;
                    editStudentCollegeById(data).then(fn);
                } else {
                    addStudentCollege(data).then(fn);
                }
            });
        },
        cancelCollege() {
            this.showCollegeDialog = false;
        },
      revokeChange(val){
          if("1" == val){
              this.postForm.status = '0';
          }
      },

          save() {
            this.$refs.postForm.validate(valid => {
                if (!valid) {
                    return;
                }
                 let data = _.cloneDeep(this.postForm);
                 data.time = this.$refs.datepicker.displayValue;
                 data.id = this.editId;

                 editGraduateDegree(data).then(res => {
                    if(res.code==200){
                        this.$message({
                            type: "success",
                            message: this.$t("message.saveSuccess")
                        });
                        this.back();
                    }
                });
            });
        },

         initCollege() {
            if (this.options.college.length == 0) {
                return;
            }
            let colleges = [];
            let cols = 4;
            let rows = 0;
            let len = this.options.college.length;
            if (len % cols == 0) {
                rows = len / cols;
            } else {
                rows = Math.floor(len / cols) + 1;
            }
            for (let i = 0; i < rows; i++) {
                colleges.push({
                    c0: null,
                    c1: null,
                    c2: null,
                    c3: null
                });
            }
            this.options.college.forEach((c, index) => {
                colleges[Math.floor(index / cols)]["c" + (index % cols)] = c;
            });
            this.colleges = colleges;
        },


         //删除院系
        deleteCollege(row) {
            // this.$confirm(
            //     this.$t("message.deleteConfirm"),
            //     this.$t("message.prompt"),
            //     {
            //         confirmButtonText: this.$t("message.confirm"),
            //         cancelButtonText: this.$t("message.cancel"),
            //         type: "warning"
            //     }
            this.$delConfirm().then(() => {
                deleteStudentCollegeById({ ids: [row.id] }).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            type: "success",
                            message: this.$t("message.deleteSuccess")
                        });
                        this.getStudentCollegeList();
                    }
                });
            });
        },
           resetCollegeFormValidate() {
            this.postCollegeForm.trainingLevel = "";
            this.postCollegeForm.trainingCategory = [];
            this.postCollegeForm.studentCategory = "2";
            this.chkColleges.length = 0;
            this.colleges = [];
            this.editCollegeId = "";
            this.$refs.postCollegeForm.clearValidate();
        },

         resetFormValidate() {
            this.$refs.postForm.clearValidate();
            this.postForm.majorId = "";
            this.postForm.name = "";
            this.postForm.nameEn = "";
            this.postForm.time = "";
            this.postForm.code = "";
            this.postForm.isDoctor = "0";
            this.postForm.status = "1";
            this.editId = "";
            this.collegeRelation.length = 0;
        },


		back() {
			this.resetFormValidate();
			this.$emit("back", "main");
		}
	}
};
</script>

<style lang="scss">
.profession_bread_hearder {
	height: 56px;
	border-bottom: 2px solid #dcdfe6;
	cursor: default;
	.title {
		font-size: 20px;
		color: #000;
		font-weight: bold;
	}
	.class-profiles {
		float: left;
		width: 40%;
		div {
			padding: 5px 0;
        };
	}
}
.profess_footer_border {
        height: 56px;
    	border-top: 2px solid #dcdfe6;
        margin-top: 36px;
}

.proManange-component1 {
   	text-align: left;
	margin: 3px auto;
    border: 3px solid #D2D4D6;
	border-width: 3px 3px 3px 3px;
	td {
		padding: 6px;
		border-color: #c0c4cc;
		//border-style: solid;
        border: 1px solid #D2D4D6;
		border-width: 1px 0 0 1px;
        height: 32px;
        width: 236px
	}
    .el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner {
        border-left-color: #F5F7F9;
        background: #F5F7F9;
        font-size: 14px;
        height: 19px;
        padding: 0px;
        color: #8896A7

    }
}
</style>

